<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>编辑任务列表</title>
    <link rel="stylesheet" href="p-0.css">
</head>
<body>
	
    <div class="page-top">
        <div class="page-content">
            <h2>任务计划列表</h2>
        </div>
    </div>
    <div class="main" id="app">
        <h3 class="big-title">添加任务：</h3>
        <input placeholder="例如：吃饭睡觉打豆豆； 提示：+回车即可添加任务" class="task-input" 
        	v-on:keyup.enter="addTodo" v-model="todo"/>
        <ul class="task-count" v-show="list.length">
            <li>{{unCheckedLength}}个任务未完成</li>
            <li class="action">
                <a class="active" href="#">所有任务</a>
                <a href="#">未完成的任务</a>
                <a href="#">完成的任务</a>
            </li>
        </ul>
        <h3 class="big-title">任务列表：</h3>
        <div class="tasks">
            <span class="no-task-tip" v-show="!list.length">还没有添加任何任务</span>
            <ul class="todo-list">
            	<li class="todo" 
            		v-for="(v,k) in list" 
            		v-bind:class="{completed:v.isChecked,editing:k===editorTodo}">
                    <div class="view">
                        <input class="toggle" type="checkbox" v-model="v.isChecked"/>
                        <label @dblclick="editTodo(k)">{{v.title}}</label>
                        <button class="destroy" @click="delTodo(k)"></button>
                    </div>
                    <input class="edit" 
                    	v-model="v.title" 
                    	v-autofocus="k===editorTodo"
                    	@blur="repaired"
                    	@keyup.enter="repaired"
                    	@keyup.esc="cancel(v)"
                    	/>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>
<script src="../2.1.8/vue.js"></script>
<script>
	/*****************************************************************
		在 vue 中操作数组，会自动触发视图更新，
		主要在于 vue 对原生数组方法进行了封装，实现了数据响应式

		数据发生改变，自动渲染视图

	*****************************************************************/
	let list = [{ 
			title : '马云',
			isChecked : true, // 表示选中
		},{ 
			title : '李彦宏',
			isChecked : false, // 表示未选中 
		}];
	var vm = new Vue({
		el : '#app',
		data : {
			list : list,
			todo : '',
			editorTodo : '', // 用于记录编辑的数据位置
			title : ''
		},
		methods : {
			// 添加任务
			addTodo(){
				if( this.todo )
				this.list.unshift({
					title : this.todo,
					isChecked : false,
				});
				this.todo = '';
			},
			// 删除任务
			delTodo( index ){
				this.list.splice( index, 1 );
			},
			// 双击编辑任务
			editTodo( index ){
				this.editorTodo = index;
				this.title = this.list[index].title;
			},
			repaired(){ // 修改成功
				this.editorTodo = '';
			},
			cancel( index ){ // 取消编辑任务
				this.list[index].title = this.title;
				this.title = ''; // 清空数据记录
				this.editorTodo = ''; // 清空编辑记录
			}
		},
		computed : {
			unCheckedLength(){
				return this.list.filter(item=>!item.isChecked).length;
			}
		},
		directives : {
			autofocus : {
				// 监控数据改变
				update( el, binding ){

					if( binding.value ){ // value 表达式计算后的结果，false 或者 true
						el.focus();
					}
				}
			}
		},
	});
</script>
